<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>微信商城管理系统 - 分类管理</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap Icons CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <!-- Vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@3.2.31/dist/vue.global.min.js"></script>
    <style>
        [v-cloak] { display: none; }
        /* 确保图标正确显示 */
        .bi {
            display: inline-block;
            vertical-align: -0.125em;
        }
        
        /* 搜索框图标样式 */
        .search-icon {
            position: absolute;
            left: 12px;
            top: 50%;
            transform: translateY(-50%);
            pointer-events: none;
            z-index: 1;
        }
        
        /* 搜索框内边距调整 */
        .search-input {
            padding-left: 36px !important;
        }
        
        /* 模态对话框样式 */
        .modal-backdrop {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 50;
        }
        
        .modal-enter-active,
        .modal-leave-active {
            transition: opacity 0.3s ease;
        }
        
        .modal-enter-from,
        .modal-leave-to {
            opacity: 0;
        }
        
        .modal-content {
            background-color: white;
            border-radius: 0.5rem;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            width: 90%;
            max-width: 500px;
            max-height: 90vh;
            overflow-y: auto;
            transform: scale(1);
            transition: transform 0.3s ease;
        }
        
        .modal-enter-from .modal-content,
        .modal-leave-to .modal-content {
            transform: scale(0.9);
        }
    </style>
</head>
<body class="bg-gray-100">
    <div id="app" v-cloak class="flex h-screen overflow-hidden">
        <!-- 模态对话框组件 -->
        <Transition name="modal">
            <div v-if="modal.show" class="modal-backdrop" @click.self="closeModal">
                <div class="modal-content">
                    <div class="p-4 border-b">
                        <div class="flex justify-between items-center">
                            <h3 class="text-lg font-medium" :class="getModalHeaderClass">{{ modal.title }}</h3>
                            <button @click="closeModal" class="text-gray-400 hover:text-gray-500">
                                <i class="bi bi-x-lg"></i>
                            </button>
                        </div>
                    </div>
                    <div class="p-4">
                        <p>{{ modal.message }}</p>
                        <div v-if="modal.showForm" class="mt-4 space-y-4">
                            <div>
                                <label for="categoryName" class="block text-sm font-medium text-gray-700 mb-1">
                                    分类名称
                                </label>
                                <input 
                                    type="text" 
                                    id="categoryName" 
                                    v-model="modal.formData.name" 
                                    class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
                                    placeholder="请输入分类名称"
                                />
                            </div>
                            <div>
                                <label for="categoryDescription" class="block text-sm font-medium text-gray-700 mb-1">
                                    分类描述
                                </label>
                                <textarea 
                                    id="categoryDescription" 
                                    v-model="modal.formData.description" 
                                    rows="3"
                                    class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
                                    placeholder="请输入分类描述"
                                ></textarea>
                            </div>
                            <div>
                                <label for="categorySort" class="block text-sm font-medium text-gray-700 mb-1">
                                    排序值
                                </label>
                                <input 
                                    type="number" 
                                    id="categorySort" 
                                    v-model="modal.formData.sort" 
                                    class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
                                    placeholder="请输入排序值"
                                    min="0"
                                />
                            </div>
                            <div class="flex items-center">
                                <input 
                                    type="checkbox" 
                                    id="categoryStatus" 
                                    v-model="modal.formData.status" 
                                    class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"
                                />
                                <label for="categoryStatus" class="ml-2 block text-sm text-gray-700">
                                    启用分类
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="px-4 py-3 bg-gray-50 flex justify-end space-x-2 rounded-b-lg">
                        <button v-if="modal.showCancelButton" @click="closeModal" class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
                            {{ modal.cancelButtonText }}
                        </button>
                        <button @click="confirmModal" :class="getModalConfirmButtonClass" class="px-4 py-2 border border-transparent rounded-md text-sm font-medium text-white">
                            {{ modal.confirmButtonText }}
                        </button>
                    </div>
                </div>
            </div>
        </Transition>

        <!-- 侧边栏 -->
        <div :class="['bg-gray-900 text-white w-64 flex flex-col transition-all duration-300 ease-in-out', isSidebarOpen ? 'translate-x-0' : '-translate-x-64 md:translate-x-0']">
            <div class="p-4 bg-gray-800 flex items-center justify-between">
                <span class="text-xl font-bold">微信商城管理系统</span>
                <button @click="toggleSidebar" class="md:hidden text-white focus:outline-none">
                    <i class="bi bi-x-lg"></i>
                </button>
            </div>
            <nav class="flex-1 overflow-y-auto py-4">
                <ul class="space-y-2 px-2">
                    <li>
                        <a href="dashboard.html" class="flex items-center px-4 py-2.5 text-white hover:bg-gray-700 rounded-lg transition-all duration-200">
                            <i class="bi bi-speedometer2 mr-3"></i>
                            <span>控制台</span>
                        </a>
                    </li>
                    <li>
                        <a href="products.html" class="flex items-center px-4 py-2.5 text-white hover:bg-gray-700 rounded-lg transition-all duration-200">
                            <i class="bi bi-box-seam mr-3"></i>
                            <span>商品管理</span>
                        </a>
                    </li>
                    <li>
                        <a href="categories.html" class="flex items-center px-4 py-2.5 text-white bg-indigo-600 rounded-lg transition-all duration-200">
                            <i class="bi bi-diagram-3 mr-3"></i>
                            <span>分类管理</span>
                        </a>
                    </li>
                    <li>
                        <a href="orders.html" class="flex items-center px-4 py-2.5 text-white hover:bg-gray-700 rounded-lg transition-all duration-200">
                            <i class="bi bi-cart3 mr-3"></i>
                            <span>订单管理</span>
                        </a>
                    </li>
                    <li>
                        <a href="inventory.html" class="flex items-center px-4 py-2.5 text-white hover:bg-gray-700 rounded-lg transition-all duration-200">
                            <i class="bi bi-clipboard-check mr-3"></i>
                            <span>库存管理</span>
                        </a>
                    </li>
                    <li>
                        <a href="statistics.html" class="flex items-center px-4 py-2.5 text-white hover:bg-gray-700 rounded-lg transition-all duration-200">
                            <i class="bi bi-bar-chart mr-3"></i>
                            <span>数据统计</span>
                        </a>
                    </li>
                    <li>
                        <a href="settings.html" class="flex items-center px-4 py-2.5 text-white hover:bg-gray-700 rounded-lg transition-all duration-200">
                            <i class="bi bi-gear mr-3"></i>
                            <span>系统设置</span>
                        </a>
                    </li>
                </ul>
            </nav>
            <div class="p-4 bg-gray-800">
                <div class="flex items-center space-x-3">
                    <img src="https://via.placeholder.com/40" alt="头像" class="w-10 h-10 rounded-full">
                    <div>
                        <p class="text-sm font-medium text-white">管理员</p>
                        <p class="text-xs text-gray-400">admin@example.com</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- 主内容区 -->
        <div class="flex-1 flex flex-col overflow-hidden">
            <!-- 顶部导航栏 -->
            <header class="bg-white shadow">
                <div class="px-4 py-3 flex items-center justify-between">
                    <div class="flex items-center">
                        <button @click="toggleSidebar" class="mr-4 md:hidden text-gray-600 focus:outline-none">
                            <i class="bi bi-list text-xl"></i>
                        </button>
                        <h1 class="text-xl font-bold text-gray-800">分类管理</h1>
                    </div>
                    <div class="flex items-center space-x-4">
                        <button class="p-1 text-gray-400 rounded-full hover:bg-gray-100 hover:text-gray-600 focus:outline-none">
                            <i class="bi bi-bell text-xl"></i>
                        </button>
                        <span class="border-l h-6 border-gray-200"></span>
                        <div class="flex items-center">
                            <img src="https://via.placeholder.com/32" alt="头像" class="w-8 h-8 rounded-full mr-2">
                            <span class="text-sm font-medium text-gray-700">管理员</span>
                        </div>
                    </div>
                </div>
            </header>

            <!-- 主要内容 -->
            <main class="flex-1 overflow-y-auto p-4">
                <!-- 分类管理卡片 -->
                <div class="bg-white rounded-lg shadow p-6 mb-6">
                    <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-6">
                        <div class="flex-1">
                            <div class="relative">
                                <i class="bi bi-search text-gray-400 search-icon"></i>
                                <input type="text" v-model="searchQuery" placeholder="搜索分类名称" class="search-input p-2 border border-gray-300 rounded-lg w-full">
                            </div>
                        </div>
                        <div>
                            <button @click="openAddCategoryModal" class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition flex items-center">
                                <i class="bi bi-plus-lg mr-2"></i> 添加分类
                            </button>
                        </div>
                    </div>

                    <!-- 分类列表 -->
                    <div class="overflow-x-auto">
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        分类名称
                                    </th>
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        商品数量
                                    </th>
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        排序
                                    </th>
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        状态
                                    </th>
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        操作
                                    </th>
                                </tr>
                            </thead>
                            <tbody class="bg-white divide-y divide-gray-200">
                                <tr v-for="category in filteredCategories" :key="category.id" class="hover:bg-gray-50">
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="flex items-center">
                                            <div class="flex-shrink-0 h-10 w-10 flex items-center justify-center rounded-md bg-indigo-100 text-indigo-500">
                                                <i class="bi" :class="category.icon"></i>
                                            </div>
                                            <div class="ml-4">
                                                <div class="text-sm font-medium text-gray-900">{{ category.name }}</div>
                                                <div class="text-sm text-gray-500">{{ category.description }}</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                        {{ category.productCount }}
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                        {{ category.sort }}
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full" :class="category.active ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'">
                                            {{ category.active ? '启用' : '禁用' }}
                                        </span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                        <div class="flex space-x-3">
                                            <button @click="editCategory(category)" class="text-indigo-600 hover:text-indigo-900">
                                                编辑
                                            </button>
                                            <button @click="deleteCategory(category)" class="text-red-600 hover:text-red-900">
                                                删除
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <!-- 分页 -->
                    <div class="flex justify-between items-center mt-6">
                        <div class="text-sm text-gray-500">
                            显示 1 至 {{ filteredCategories.length }}，共 {{ filteredCategories.length }} 条
                        </div>
                        <div class="flex space-x-1">
                            <button class="px-3 py-1 border border-gray-300 rounded-md text-sm hover:bg-gray-50 disabled:opacity-50" disabled>
                                上一页
                            </button>
                            <button class="px-3 py-1 border border-indigo-500 bg-indigo-50 text-indigo-600 rounded-md text-sm">
                                1
                            </button>
                            <button class="px-3 py-1 border border-gray-300 rounded-md text-sm hover:bg-gray-50 disabled:opacity-50" disabled>
                                下一页
                            </button>
                        </div>
                    </div>
                </div>
            </main>

            <footer class="bg-white p-4 border-t text-center text-sm text-gray-500">
                &copy; 2023 微信商城管理系统. 保留所有权利.
            </footer>
        </div>
    </div>

    <script>
        const { createApp, ref, computed } = Vue
        
        createApp({
            setup() {
                // 侧边栏状态
                const isSidebarOpen = ref(false)
                
                // 搜索条件
                const searchQuery = ref('')
                
                // 分类数据
                const categories = ref([
                    {
                        id: 1,
                        name: '手机数码',
                        description: '包含手机、平板电脑等数码产品',
                        icon: 'bi-phone',
                        productCount: 156,
                        sort: 1,
                        active: true
                    },
                    {
                        id: 2,
                        name: '电脑办公',
                        description: '包含笔记本电脑、台式机、办公设备等',
                        icon: 'bi-laptop',
                        productCount: 89,
                        sort: 2,
                        active: true
                    },
                    {
                        id: 3,
                        name: '家用电器',
                        description: '包含电视、冰箱、洗衣机等大型家电',
                        icon: 'bi-tv',
                        productCount: 64,
                        sort: 3,
                        active: true
                    },
                    {
                        id: 4,
                        name: '服装鞋包',
                        description: '包含男女服装、鞋靴、箱包等',
                        icon: 'bi-handbag',
                        productCount: 215,
                        sort: 4,
                        active: true
                    },
                    {
                        id: 5,
                        name: '美妆个护',
                        description: '包含化妆品、个人护理用品等',
                        icon: 'bi-droplet',
                        productCount: 78,
                        sort: 5,
                        active: true
                    },
                    {
                        id: 6,
                        name: '食品生鲜',
                        description: '包含零食、饮料、生鲜食品等',
                        icon: 'bi-egg-fried',
                        productCount: 96,
                        sort: 6,
                        active: false
                    }
                ])
                
                // 模态对话框状态
                const modal = ref({
                    show: false,
                    title: '',
                    message: '',
                    type: 'info', // info, success, warning, danger
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    showCancelButton: true,
                    showForm: false,
                    formData: {
                        id: null,
                        name: '',
                        description: '',
                        icon: 'bi-tag',
                        sort: 0,
                        status: true
                    },
                    callback: null
                })
                
                // 模态对话框样式计算属性
                const getModalHeaderClass = computed(() => {
                    switch (modal.value.type) {
                        case 'success': return 'text-green-600';
                        case 'warning': return 'text-yellow-600';
                        case 'danger': return 'text-red-600';
                        default: return 'text-gray-900';
                    }
                })
                
                const getModalConfirmButtonClass = computed(() => {
                    switch (modal.value.type) {
                        case 'success': return 'bg-green-600 hover:bg-green-700';
                        case 'warning': return 'bg-yellow-600 hover:bg-yellow-700';
                        case 'danger': return 'bg-red-600 hover:bg-red-700';
                        default: return 'bg-indigo-600 hover:bg-indigo-700';
                    }
                })
                
                // 打开模态对话框
                function showModal(options) {
                    modal.value = {
                        show: true,
                        title: options.title || '提示',
                        message: options.message || '',
                        type: options.type || 'info',
                        confirmButtonText: options.confirmButtonText || '确定',
                        cancelButtonText: options.cancelButtonText || '取消',
                        showCancelButton: options.showCancelButton !== undefined ? options.showCancelButton : true,
                        showForm: options.showForm !== undefined ? options.showForm : false,
                        formData: options.formData || {
                            id: null,
                            name: '',
                            description: '',
                            icon: 'bi-tag',
                            sort: 0,
                            status: true
                        },
                        callback: options.callback || null
                    }
                }
                
                // 关闭模态对话框
                function closeModal() {
                    modal.value.show = false
                }
                
                // 确认模态对话框
                function confirmModal() {
                    if (modal.value.callback) {
                        modal.value.callback(modal.value.formData)
                    }
                    closeModal()
                }
                
                // 根据搜索条件过滤分类
                const filteredCategories = computed(() => {
                    if (!searchQuery.value) {
                        return categories.value
                    }
                    
                    return categories.value.filter(category => 
                        category.name.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
                        category.description.toLowerCase().includes(searchQuery.value.toLowerCase())
                    )
                })
                
                // 切换侧边栏
                function toggleSidebar() {
                    isSidebarOpen.value = !isSidebarOpen.value
                }
                
                // 打开添加分类模态框
                function openAddCategoryModal() {
                    showModal({
                        title: '添加分类',
                        message: '请填写分类信息',
                        type: 'info',
                        showForm: true,
                        formData: {
                            id: null,
                            name: '',
                            description: '',
                            icon: 'bi-tag',
                            sort: categories.value.length + 1,
                            status: true
                        },
                        confirmButtonText: '保存',
                        callback: (formData) => {
                            // 添加新分类
                            const newCategory = {
                                id: categories.value.length + 1,
                                name: formData.name,
                                description: formData.description,
                                icon: formData.icon || 'bi-tag',
                                productCount: 0,
                                sort: formData.sort,
                                active: formData.status
                            }
                            
                            categories.value.push(newCategory)
                            
                            // 显示成功提示
                            showModal({
                                title: '添加成功',
                                message: `分类 "${formData.name}" 已成功添加`,
                                type: 'success',
                                showCancelButton: false
                            })
                        }
                    })
                }
                
                // 编辑分类
                function editCategory(category) {
                    showModal({
                        title: '编辑分类',
                        message: '请修改分类信息',
                        type: 'info',
                        showForm: true,
                        formData: {
                            id: category.id,
                            name: category.name,
                            description: category.description,
                            icon: category.icon,
                            sort: category.sort,
                            status: category.active
                        },
                        confirmButtonText: '保存',
                        callback: (formData) => {
                            // 更新分类信息
                            const index = categories.value.findIndex(c => c.id === formData.id)
                            if (index !== -1) {
                                categories.value[index].name = formData.name
                                categories.value[index].description = formData.description
                                categories.value[index].icon = formData.icon
                                categories.value[index].sort = formData.sort
                                categories.value[index].active = formData.status
                                
                                // 显示成功提示
                                showModal({
                                    title: '编辑成功',
                                    message: `分类 "${formData.name}" 已成功更新`,
                                    type: 'success',
                                    showCancelButton: false
                                })
                            }
                        }
                    })
                }
                
                // 删除分类
                function deleteCategory(category) {
                    showModal({
                        title: '删除分类',
                        message: `确定要删除分类 "${category.name}" 吗？该操作不可撤销。`,
                        type: 'danger',
                        confirmButtonText: '删除',
                        callback: () => {
                            // 删除分类
                            categories.value = categories.value.filter(c => c.id !== category.id)
                            
                            // 显示成功提示
                            showModal({
                                title: '删除成功',
                                message: `分类 "${category.name}" 已成功删除`,
                                type: 'success',
                                showCancelButton: false
                            })
                        }
                    })
                }
                
                return {
                    isSidebarOpen,
                    searchQuery,
                    categories,
                    filteredCategories,
                    toggleSidebar,
                    openAddCategoryModal,
                    editCategory,
                    deleteCategory,
                    modal,
                    showModal,
                    closeModal,
                    confirmModal,
                    getModalHeaderClass,
                    getModalConfirmButtonClass
                }
            }
        }).mount('#app')
    </script>
</body>
</html> 